<template>
    <div class="index-main-container">
        <index-aside></index-aside>
        <el-main>
            <index-header></index-header>
            <div class="PlaceholderElement"></div>
            <router-view class="router-view"></router-view>
        </el-main>
    </div>
</template>

<script>
import IndexAside from '@/components/index/IndexAsideStatic';
import IndexHeader from '@/components/index/IndexHeader';
import menu from '@/utils/menu';

export default {
    components: {
        IndexAside,
        IndexHeader,
    },
    data() {
        return {
            menuList: [],
            role: '',
            currentIndex: -2,
            itemMenu: [],
        };
    },
    mounted() {
        let menus = menu.list();
        this.menuList = menus;
        this.role = this.$storage.get('role');
    },
    created() {
        this.init();
        console.log(console.log(this.$route.path));
    },
    methods: {
        init() {
            this.$nextTick(() => {});
        },
        menuHandler(menu) {
            this.$router.push({
                name: menu.tableName,
            });
            this.title = menu.menu;
        },
        titleChange(index, menus) {
            this.currentIndex = index;
            this.itemMenu = menus;
            console.log(menus);
        },
        homeChange(index) {
            this.itemMenu = [];
            this.title = '';
            this.currentIndex = index;
            this.$router.push({
                name: 'home',
            });
        },
        centerChange(index) {
            this.itemMenu = [
                {
                    buttons: ['新增', '查看', '修改', '删除'],
                    menu: '修改密码',
                    tableName: 'updatePassword',
                },
                {
                    buttons: ['新增', '查看', '修改', '删除'],
                    menu: '个人信息',
                    tableName: 'center',
                },
            ];
            this.title = '';
            this.currentIndex = index;
            this.$router.push({
                name: 'home',
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.index-main-container {
    width: 100%;
    height: 100%;

    .el-main {
        height: 100%;
        padding: 0;
        margin: 0 0 0 200px;
        position: relative;
        display: flex;
        flex-direction: column;

        .PlaceholderElement {
            padding: 32px;
        }

        .router-view {
            flex: 1 0 auto;
            padding: 30px;
            background: url('../../assets/img/bg.png') repeat fixed;
            overflow: auto;
        }
    }

    a {
        text-decoration: none;
        color: #555;
    }

    a:hover {
        background: #00c292;
    }

    .nav-list {
        width: 100%;
        text-align: left;
        margin: 20px auto 0;

        .nav-title {
            display: inline-block;
            font-size: 15px;
            color: #333;
            padding: 15px 25px;
            border: none;
        }

        .nav-title.active {
            color: #555;
            cursor: default;
            background-color: #fff;
        }
    }

    .nav-item {
        margin-top: 20px;
        background: #ffffff;
        padding: 15px 0;

        .menu {
            padding: 15px 25px;
        }
    }

    .detail-form-content {
        background: transparent;
    }
}
</style>
